<!-- 主体自定义 -->

<template>
  <div v-if="diy" class="CommonBody-BodyDiy" :title="cardTitle" :style="diyStyle">
    <slot />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import props from '../props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'BodyDiy',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 主体宽度
     */
    mainWidth() {
      const { hasTree, hasOrgan, hasRegion, leftWidth } = this
      if (!hasTree && !hasOrgan && !hasRegion) return '100%'
      return `calc(100% - ${leftWidth})`
    },

    /**
     * 自定义主体样式对象
     */
    diyStyle() {
      const { mainWidth: width, flex, flexColumn } = this
      const style = { width, height: '100%', display: 'inline-block' }
      const flexStyle = { display: 'inline-flex', flexDirection: flexColumn ? 'column' : null }
      if (flex || flexColumn) Object.assign(style, flexStyle)
      return style
    },
  },
}
</script>
